$color: #e91e63;

body {
  background: #000;
}
.container {
  position: relative;
  overflow: hidden;
  width: 124px;
  height: 124px;
  margin: 100px auto;
  border-radius: 50%;
}

.shadow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 120px;
  height: 120px;
  line-height: 120px;
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  text-align: center;
  box-shadow: 60px -60px 0 2px $color, -60px -60px 0 2px $color,
  -60px 60px 0 2px $color, 60px 60px 0 2px $color;
  &:hover {
    animation: border .5s ease forwards;
  }
}

@keyframes border{
  0% {
    box-shadow: 60px -60px 0 2px $color, -60px -60px 0 2px $color, -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px transparent;
  }
  25% {
    box-shadow: 0 -125px 0 2px $color, -60px -60px 0 2px $color, -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff;
  }
  50% {
    box-shadow: 0 -125px 0 2px $color, -125px 0px 0 2px $color, -60px 60px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff;
  }
  75% {
    box-shadow: 0 -125px 0 2px $color, -125px 0px 0 2px $color, 0px 125px 0 2px $color, 60px 60px 0 2px $color, 0 0 0 2px #fff;
  }
  100% {
    box-shadow: 0 -125px 0 2px $color, -125px 0px 0 2px $color, 0px 125px 0 2px $color, 120px 40px 0 2px $color, 0 0 0 2px #fff;
  }
}

